<template>
	<view class="padding wrapper">
		<view class="container">
			<view class="profile-header">
				<wd-img :width="80" :height="80" round src="../../static/myPage_png/touxiang.jpg" />
				<view class="user-info">
					<view class="username">{{ userInfo.username }}</view>
					<view class="company-info">
						<text class="company-name">山西瑞铭网络通信工程有限公司</text>
						<text class="role">{{ userInfo.roleName || "职务信息" }}</text>
					</view>
				</view>
			</view>

			<view class="contact-info">
				<view class="info-item">
					<view class="icon">&#x1F4DE;</view>
					<view class="info-text">
						<text class="label">用户联系方式</text>
						<text class="value">{{ userInfo.telephone || "暂无信息" }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="icon">&#x1F465;</view>
					<view class="info-text">
						<text class="label">组织</text>
						<!-- userInfo.organizationName -->
						<text class="value">{{ userInfo.organizationName || "暂无信息" }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="icon">&#x1F464;</view>
					<view class="info-text">
						<text class="label">安全责任人</text>
						<text class="value">{{ userInfo.safeResponMan || "暂无信息" }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="icon">&#x1F4DE;</view>
					<view class="info-text">
						<text class="label">责任人联系方式</text>
						<text class="value">{{ userInfo.safeTelephone || "暂无信息" }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="icon">&#x1F464;</view>
					<view class="info-text">
						<text class="label">安全管理人</text>
						<text class="value">{{ userInfo.safeManager || "暂无信息" }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: this.$store.state.userInfo
			}
		}
	}
</script>

<style scoped>
.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90vh;
	background-color: #f0f2f5;
}
.container {
	margin: auto;
	background-color: #ffffff;
	border-radius: 15px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
	padding: 20px;
}

.profile-header {
	display: flex;
	align-items: center;
	padding-bottom: 15px;
	border-bottom: 1px solid #e6e9ef;
}

.user-info {
	margin-left: 15px;
}

.username {
	font-weight: bold;
	font-size: 20px;
	color: #333;
}

.company-info {
	margin-top: 5px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: #f1f3fa;
	border-radius: 6px;
	padding: 4px 10px;
}

.company-name {
	max-width: 250px;
	font-weight: bold;
	color: #333;
	font-size: 16px;
}

.role {
	color: #888;
	font-size: 14px;
	margin-top: 3px;
}

.contact-info {
	margin-top: 15px;
}

.info-item {
	display: flex;
	align-items: center;
	padding: 12px;
	background-color: #f8f9fd;
	border-radius: 8px;
	margin-bottom: 10px;
}

.icon {
	font-size: 20px;
	color: #5a7aff;
	margin-right: 10px;
}

.info-text {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.label {
	display: flex;
	align-items: center;
	font-weight: bold;
	color: #555;
}

.value {
	max-width: 200px;
	color: #333;
	margin-left: auto;
}
</style>
